import React, { ReactNode } from 'react'
import { CSSTransition } from 'react-transition-group'
import { CSSTransitionProps } from 'react-transition-group/CSSTransition'

type AnimationName = 'zoom-in-top' | 'zoom-in-left' | 'zoom-in-bottom' | 'zoom-in-right'
type TransitionProps = CSSTransitionProps & {
  animation?: AnimationName
  // wrapper?: boolean
  children?: ReactNode
}
const Transition: React.FC<TransitionProps> = (props) => {
  const {
    children,
    animation = 'zoom-in-top',
    // wrapper, // 是否包裹一层div transition 不会继承
    appear = true, // 是否在初次渲染时执行动画
    unmountOnExit = true, // 是否在退出时卸载组件
    ...restProps
  } = props
  return (
    <CSSTransition
      classNames={animation} // 动画名称
      unmountOnExit
      appear
      {...restProps}
    >
      {children}
    </CSSTransition>
  )
}
export default Transition
